<template>
  <div class="content-body">
    <div class="header">
      <div class="header-left">
        <span>省市水质情况实时监测系统</span>
      </div>
      <div class="header-time">
        <span class="jump" @click="gotoExportAllData">导出数据</span>
        <span id="time">{{ time }}</span>
      </div>
    </div>
    <div class="content">
      <div class="content-con">
        <div class="left-body">
          <div class="left-top public-bg">
            <div class="public-title">监测点数量图</div>
            <div ref="mCount_bar" class="chart"></div>
          </div>
          <div class="left-bottom public-bg">
            <div class="public-title">点位分布统计</div>
            <div ref="mCount_pie" class="chart"></div>
          </div>
        </div>
        <div class="center-body">
          <div ref="country_map" class="chart map"></div>
        </div>
        <div class="right-body">
          <div class="right-top public-bg">
            <div class="public-title">水质污染TOP5</div>
            <div class="title-nav">
              <div class="top5-ul">
                <ul>
                  <li>
                    <span>1</span>
                    <span>严重</span>
                    <span>辽宁省</span>
                    <span>盘锦市</span>
                    <span>重度污染</span>
                    <span>黄海海域</span>
                  </li>
                  <li>
                    <span>2</span>
                    <span>严重</span>
                    <span>上海市</span>
                    <span>崇明县</span>
                    <span>重度污染</span>
                    <span>东海海域</span>
                  </li>
                  <li>
                    <span>3</span>
                    <span>严重</span>
                    <span>浙江省</span>
                    <span>嘉兴市</span>
                    <span>重度污染</span>
                    <span>东海海域</span>
                  </li>

                  <li>
                    <span>4</span>
                    <span>中度</span>
                    <span>山东省</span>
                    <span>东营市</span>
                    <span>重度污染</span>
                    <span>渤海海域</span>
                  </li>

                  <li>
                    <span>5</span>
                    <span>中度</span>
                    <span>福建省</span>
                    <span>宁德市</span>
                    <span>中度污染</span>
                    <span>东海海域</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="right-bottom public-bg">
            <div class="public-title">{{ province }}水质占比分析</div>
            <div ref="quality_pie" class="chart"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import china from "../../public/china.json";

export default {
  data() {
    return {
      time: null,
      monitor_number: [],
      province: "福建",
      quality_data: [],
    };
  },
  created() {
    this.timing();
    this.getMonPointCount();
    this.getProvinceQuality();
  },
  mounted() {
    this.drawMap();
    this.drawQualityPieChart();
  },
  computed: {},
  watch: {
    monitor_number() {
      this.$nextTick(() => {
        this.drawNumBarChart();
        this.drawNumPieChart();
      });
    },
    province() {
      this.$nextTick(() => {
        this.getProvinceQuality();
        // this.drawQualityPieChart();
      });
    },
    quality_data() {
      this.$nextTick(() => {
        this.drawQualityPieChart();
      });
    },
  },
  beforeDestroy() {
    // 不销毁会在其他页面也执行，浪费性能
    clearInterval(this.timing);
    this.time = null;
  },
  methods: {
    // 当前时间显示
    timing() {
      setInterval(() => {
        this.time = this.common.getRealTime();
      }, 1000);
    },
    // 获取省份的监测点数量
    getMonPointCount() {
      this.$axios({
        url: "getNationalMonPointCount",
      })
        .then((res) => {
          this.monitor_number = res.data;
        })
        .catch((err) => err);
    },
    // 绘制省的监测点数量柱状图
    drawNumBarChart() {
      const echartsNum = this.$echarts.init(this.$refs.mCount_bar);
      let xData = [];
      let seriesData = [];
      for (let item of this.monitor_number) {
        xData.push(item.province);
        seriesData.push(item.number);
      }
      const option = {
        xAxis: {
          type: "category",
          data: xData,
          axisLabel: {
            rotate: 45,
          },
        },
        yAxis: {
          type: "value",
        },
        tooltip: {
          trigger: "axis",
        },
        series: [
          {
            data: seriesData,
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "最大值",
                },
                {
                  type: "min",
                  name: "最小值",
                },
              ],
            },
            markLine: {
              data: [
                {
                  type: "average",
                  name: "平均值",
                },
              ],
            },
          },
        ],
      };
      echartsNum.setOption(option);
    },
    // 绘制点位玫瑰图
    drawNumPieChart() {
      const echartsNum = this.$echarts.init(this.$refs.mCount_pie);
      let seriesData = [];
      for (let item of this.monitor_number) {
        seriesData.push({ value: item.number, name: item.province });
      }
      const option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "地区",
            type: "pie",
            radius: [20, 120],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 3,
            },
            labelLine: {
              // 引导线
              length: 1, // 引导线第一段长度
              length2: 10, // 引导线第二段长度
            },
            data: seriesData,
          },
        ],
      };
      echartsNum.setOption(option);
    },
    // 绘制中国map
    drawMap() {
      let _this = this;
      let myChart = this.$echarts.init(this.$refs.country_map);
      let data = [
        {
          name: "福建",
          value: [119.30245, 26.10634],
        },
        {
          name: "广东",
          value: [113.27243, 23.13795],
        },
        {
          name: "广西",
          value: [108.33452, 22.82127],
        },
        {
          name: "海南",
          value: [110.35554, 20.0258],
        },
        {
          name: "河北",
          value: [114.53659, 38.0432],
        },
        {
          name: "江苏",
          value: [118.76955, 32.06678],
        },
        {
          name: "辽宁",
          value: [123.43559, 41.84147],
        },
        {
          name: "山东",
          value: [117.02744, 36.67486],
        },
        {
          name: "上海",
          value: [121.48054, 31.23593],
        },
        {
          name: "天津",
          value: [117.20809, 39.0911],
        },
        {
          name: "浙江",
          value: [120.15954, 30.27155],
        },
      ];
      let option = {
        geo: {
          map: "china",
          type: "china",
          aspectScale: 0.85,
          layoutCenter: ["50%", "50%"], //地图位置
          layoutSize: "100%",
          itemStyle: {
            normal: {
              shadowColor: "#276fce",
              shadowOffsetX: 0,
              shadowOffsetY: 15,
              opacity: 0.5,
            },
            emphasis: {
              areaColor: "#276fce",
            },
          },
          regions: [
            {
              name: "南海诸岛",
              itemStyle: {
                areaColor: "rgba(0, 10, 52, 1)",
                borderColor: "rgba(0, 10, 52, 1)",
                normal: {
                  opacity: 0,
                  label: {
                    show: false,
                    color: "#009cc9",
                  },
                },
              },
              label: {
                show: false,
                color: "#FFFFFF",
                fontSize: 12,
              },
            },
          ],
        },
        series: [
          // 常规地图
          {
            type: "map",
            mapType: "china",
            aspectScale: 0.85,
            layoutCenter: ["50%", "50%"], //地图位置
            layoutSize: "100%",
            zoom: 1, //当前视角的缩放比例
            itemStyle: {
              normal: {
                areaColor: "#0c274b",
                borderColor: "#1cccff",
                borderWidth: 1.5,
              },
              emphasis: {
                areaColor: "#02102b",
                label: {
                  color: "#fff",
                },
              },
            },
          },
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 2,
            symbolSize: 10,
            rippleEffect: {
              //坐标点动画
              period: 3,
              scale: 3,
              brushType: "fill",
            },
            label: {
              normal: {
                show: true,
                position: "right",
                formatter: "{b}",
                color: "#b3e2f2",
                fontWeight: "bold",
                fontSize: 14,
              },
            },
            data: data,
            itemStyle: {
              //坐标点颜色
              normal: {
                show: true,
                color: "#ff8003",
                shadowBlur: 20,
                shadowColor: "#fff",
              },
              emphasis: {
                areaColor: "#f00",
              },
            },
          },
        ],
      };
      myChart.on("click", function (params) {
        // 点击省份出现的
        let old = _this.province;
        let newProvince;
        if (params.name[params.name.length - 1] == "省") {
          newProvince = params.name.slice(0, params.name.length - 1);
        } else {
          newProvince = params.name;
        }
        // 点击没有监测点的省份无变化
        if (_this.common.findElem(data, "name", newProvince) != "-1") {
          _this.province = newProvince;
        }
      });
      this.$echarts.registerMap("china", china, {});
      myChart.setOption(option);
    },
    // 获取省份的水质数据
    getProvinceQuality() {
      this.$axios({
        url: "getProvinceQuality",
        params: {
          province: this.province,
        },
      })
        .then((res) => {
          this.quality_data = res.data;
        })
        .catch((err) => err);
    },
    // 绘制水质饼图
    drawQualityPieChart() {
      const echartsQuality = this.$echarts.init(this.$refs.quality_pie);
      let legendData = [];
      let seriesData = [];
      for (let item of this.quality_data) {
        legendData.push(item.classification);
        seriesData.push({ value: item.number, name: item.classification });
      }
      const option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          x: "left",
          data: legendData,
          textStyle: {
            color: "#e9ebee",
          },
        },
        series: [
          {
            name: "水质情况",
            type: "pie",
            center: ["60%", "50%"],
            radius: ["30%", "80%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center",
              },
              emphasis: {
                show: true,
                // textStyle: {
                //   fontSize: "30",
                //   fontWeight: "bold",
                // },
              },
            },
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            },
            data: seriesData,
          },
        ],
      };
      echartsQuality.setOption(option);
    },
    // 跳转到导出各项指标页面
    gotoExportAllData() {
      this.$router.push({ path: "/exportAllData" });
    },
  },
};
</script>
<style lang="less" scoped>
.public-bg {
  padding-top: 15px;
  background: rgba(12, 26, 63, 0.3);
}
.public-title {
  width: calc(100% - 20px);
  height: 30px;
  position: relative;
  top: 0;
  left: 5px;
  color: white;
  padding-left: 16px;
  line-height: 30px;
  font-size: 13px;
}
.public-title:before {
  width: 4px;
  height: 20px;
  top: 5px;
  position: absolute;
  content: "";
  background: #2997e4;
  border-radius: 2px;
  left: 5px;
}
.content-body {
  width: 100%;
  height: 100%;
  background: #0d325f;
  background-size: 100% 100%;
  position: absolute;
  border: solid 15px transparent;
  box-sizing: border-box;
  .header {
    height: 70px;
    width: 100%;
    color: #ffffff;
    .header-left {
      width: 50%;
      float: left;
      line-height: 70px;
      span {
        font-weight: bold;
        font-size: 24px;
        letter-spacing: 2px;
        padding: 0 20px;
      }
    }
    .header-time {
      .jump {
        margin-right: 40px;
        font-size: 24px;
        color: #1db5ea;
        cursor: pointer;
      }
      .jump:hover {
        color: #eb6841;
      }
      width: 48%;
      line-height: 70px;
      float: right;
      text-align: right;
      padding-right: 20px;
    }
  }
  .content {
    width: 100%;
    height: calc(100% - 75px);
    position: absolute;
    .content-con {
      height: 100%;
      .left-body {
        width: 25%;
        height: 100%;
        float: left;
        margin: 0 0.3%;
        .public-title {
          font-size: 16px;
        }
        .left-top {
          width: 100%;
          .chart {
            height: 260px;
            width: 100%;
          }
          margin-bottom: 10px;
        }
        .left-bottom {
          width: 100%;
          .chart {
            height: 260px;
            width: 100%;
          }
        }
      }
      .center-body {
        width: 50%;
        height: 100%;
        margin: 0 0.3%;
        float: left;
        .map {
          width: 100%;
          height: 100%;
        }
      }
      .right-body {
        width: 22%;
        height: 100%;
        float: right;
        margin: 0 0.3%;
        .public-title {
          font-size: 16px;
        }
        .right-top {
          width: 100%;
          // height: 32%;
          margin-bottom: 10px;
          .title-nav .top5-ul {
            width: calc(100% - 20px);
            height: calc(100% - 30px);
            padding: 10px;
            ul {
              width: 100%;
              height: 100%;
              padding-inline-start: 0px;
              > li {
                width: 100%;
                height: 42px;
                color: #ffffff;
                line-height: 42px;
                justify-content: center;
              }
              li {
                span {
                  margin-left: 3%;
                  font-size: 14px;
                  display: inline-block;
                  text-align: center;
                }
                span:nth-child(1) {
                  color: #eb6841;
                  font-style: oblique;
                  font-size: 20px;
                }
                span:nth-child(2) {
                  width: 10%;
                  height: 30px;
                  line-height: 30px;
                  vertical-align: center;
                  border-radius: 5px;
                  color: #ffffff;
                }
              }
            }
            ul,
            li {
              list-style: none;
            }
          }
        }
        .right-bottom {
          width: 100%;
          .chart {
            height: 260px;
            width: 100%;
          }
        }
      }
    }
  }
}
.title-nav .top5-ul ul li:nth-child(1) span:nth-child(2),
.title-nav .top5-ul ul li:nth-child(2) span:nth-child(2),
.title-nav .top5-ul ul li:nth-child(3) span:nth-child(2) {
  background: #d89346;
}
.title-nav .top5-ul ul li:nth-child(4) span:nth-child(2),
.title-nav .top5-ul ul li:nth-child(5) span:nth-child(2) {
  background: #1db5ea;
}
</style>
